import React from "react";

var webgl = null;
var vertexShaderObject = null;
var fragmentShaderObject = null;
var programObject = null;
var triangleBuffer = null;

var v3PositionIndex = 0;
var attrUV = 1;

var uniformProj = 0;
var uniformTexture = 0;
var uniformAnim = 0;
var uniformAngle = 0;
var textureHandle;
var projectMat = mat4.create();
var animStep = 0;
var angle = 0;
function renderScene() {


            
  // 设置重绘背景的颜色
  webgl.clearColor(0.0, 0.0, 0.0, 1.0);
  // 执行绘制，即将背景清空成制定的颜色(clearColor)
  webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
  webgl.enable(webgl.DEPTH_TEST);

  // 指定绘制所使用的顶点数据 从 该缓冲区中获取
  webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);

  angle += 1;
  webgl.activeTexture(webgl.TEXTURE0);
  webgl.bindTexture(webgl.TEXTURE_2D, textureHandle);
  webgl.uniform1i(uniformTexture, 0);
  webgl.uniform1f(uniformAngle, angle * Math.PI / 180);

  webgl.uniformMatrix4fv(uniformProj, false, projectMat);
  webgl.enableVertexAttribArray(v3PositionIndex);

  webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0);

  webgl.drawArrays(webgl.POINTS, 0, 1000000);
}

let requestAnimFrame = window.requestAnimFrame = (function () {
  return window.requestAnimationFrame ||
         window.webkitRequestAnimationFrame ||
         window.mozRequestAnimationFrame ||
         window.oRequestAnimationFrame ||
         window.msRequestAnimationFrame ||
         function (callback, element) {
             window.setTimeout(callback, 1000 / 60);
         };
})();
function handleLoadedTexture(texture) {
  webgl.bindTexture(webgl.TEXTURE_2D, texture);
  webgl.texImage2D(webgl.TEXTURE_2D, 0, webgl.RGBA, webgl.RGBA, webgl.UNSIGNED_BYTE, texture.image);
  webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MAG_FILTER, webgl.NEAREST);
  webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MIN_FILTER, webgl.NEAREST);
  webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_S, webgl.REPEAT);
  webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_T, webgl.REPEAT);

  webgl.bindTexture(webgl.TEXTURE_2D, null);
}
function initTexture(imageFile) {
  textureHandle = webgl.createTexture();
  textureHandle.image = new Image();
  textureHandle.image.src = imageFile;
  textureHandle.image.onload = function () {
      handleLoadedTexture(textureHandle)
  }
  
}
function getShaderSource(scriptID) {
  var shaderScript = document.getElementById(scriptID);
  if (shaderScript == null) return "";

  var sourceCode = "";
  var child = shaderScript.firstChild;
  while (child) {
      if (child.nodeType == child.TEXT_NODE) sourceCode += child.textContent;
      child = child.nextSibling;
  }

  return sourceCode;
}

class TexturePoint extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          count: 0,
        };
      }
      componentDidMount() {
         this.init()
         this.webGLStart()
      }
      init(){
        const canvas = document.getElementById("myCanvas");
        webgl = canvas.getContext("webgl");

        webgl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);

        mat4.ortho(0, canvas.clientWidth, canvas.clientHeight, 0, -1.0, 1.0, projectMat);


        vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
        fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);

        webgl.shaderSource(vertexShaderObject, getShaderSource("shader-vs"));
        webgl.shaderSource(fragmentShaderObject, getShaderSource("shader-fs"));

        webgl.compileShader(vertexShaderObject);
        webgl.compileShader(fragmentShaderObject);

        if (!webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)) {
            var err = webgl.getShaderInfoLog(vertexShaderObject);
            alert(err);
            return;
        }
        if (!webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS)) {
            var err = webgl.getShaderInfoLog(fragmentShaderObject);
            alert(err);
            return;
        }

        programObject = webgl.createProgram();

        webgl.attachShader(programObject, vertexShaderObject);
        webgl.attachShader(programObject, fragmentShaderObject);

        webgl.linkProgram(programObject);
        if (!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)) {
            alert("error:programObject");
            return;
        }

        webgl.useProgram(programObject);

        uniformProj     =   webgl.getUniformLocation(programObject, "proj");
        uniformTexture = webgl.getUniformLocation(programObject, "texture");
        uniformAngle = webgl.getUniformLocation(programObject, "angle");
        v3PositionIndex =   webgl.getAttribLocation(programObject, "v3Position");


        webgl.activeTexture(webgl.TEXTURE0);
        webgl.bindTexture(webgl.TEXTURE_2D, textureHandle);
        webgl.uniform1i(uniformTexture, 0);


        var size = 1000000;
        var dataPoint = new Float32Array(size * 3);
        for (var i = 0; i < size; ++i)
        {
            dataPoint[i * 3 + 0] = Math.random() * 500;
            dataPoint[i * 3 + 1] = Math.random() * 500;
            dataPoint[i * 3 + 2] = 0;
        }

        triangleBuffer = webgl.createBuffer();
        webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
        webgl.bufferData(webgl.ARRAY_BUFFER, dataPoint, webgl.STATIC_DRAW);
        webgl.enable(webgl.BLEND);
        webgl.blendFunc(webgl.SRC_ALPHA, webgl.ONE_MINUS_SRC_ALPHA);

        initTexture("point16.png");
      }
      webGLStart() {
        
        this.init();
       this. tick();
    }
    tick() {
      setTimeout(() => {
       
       
        renderScene();
        this.tick()
      }, 1000);
   

  }
  
      render() {
        const style = {
          border: "1px solid red",
        };
        return (
          <div>
             <canvas id="myCanvas" 
            style={style}
             width='1024' height='768'></canvas>
          </div>
        );
      }
}
export default TexturePoint